import React, {Component} from 'react';
import {
  Dimensions,
  StyleSheet,
  View,
  Text,
  Image,
  ScrollView,
  TouchableOpacity,
} from 'react-native';
import {CommonImg, ProposalImg} from '../../images/index';
import {directorList} from '../../api/index';

let widthScreen = Dimensions.get('window').width;
let heightScreen = Dimensions.get('window').height;
let info1 = require('./info');
let info2 = require('./info2');
type Props = {};

export default class AboutCommunity extends Component {
  render() {
    return (
      <ScrollView style={styles.scrollStyle}>
        <View style={styles.abortHGBCStyle}>
          <View style={{marginTop: 21}}>
            <TouchableOpacity
              onPress={() => {
                this.props.navigation.navigate('Announcement');
              }}>
              <Image source={ProposalImg.Introduction} />
            </TouchableOpacity>
          </View>
          <View style={{marginTop: 16}}>
            <TouchableOpacity
              onPress={() => {
                this.props.navigation.navigate('PDFInfo');
              }}>
              <Image source={ProposalImg.Material} />
            </TouchableOpacity>
          </View>
        </View>
        <PeopleList
          title={'董事会'}
          navigation={this.props.navigation}
          itemClick={() => this.props.navigation.navigate('Specify', {role: 1})}
        />
        <PeopleList
          title={'执行董事会'}
          navigation={this.props.navigation}
          itemClick={() => this.props.navigation.navigate('Specify', {role: 2})}
        />
      </ScrollView>
    );
  }
}

class PeopleList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      info1: [],
      info2: [],
    };
  }

  componentDidMount(): void {
    this.getInfo();
  }
  async getInfo() {
    const [_info1, _info2] = await Promise.all([
      directorList({role: 1}),
      directorList({role: 2}),
    ]);
    this.setState({
      info1: _info1.data,
      info2: _info2.data,
    });
  }
  loadpeople() {
    let peoples = [];
    if (this.props.title === '董事会') {
      for (let i = 0; i < this.state.info1.length; i++) {
        peoples.push(
          <People
            key={i}
            navigation={this.props.navigation}
            uid={this.state.info1[i].uid}
            name={this.state.info1[i].name}
            icon={this.state.info1[i].portraitkey}
          />,
        );
        if (i !== this.state.info1.length - 1) {
          peoples.push(<View key={i * -1 - 1} style={{width: 23}} />);
        }
      }
    } else {
      for (let i = 0; i < this.state.info2.length; i++) {
        peoples.push(
          <People
            key={i}
            navigation={this.props.navigation}
            uid={this.state.info2[i].uid}
            name={this.state.info2[i].name}
            icon={this.state.info2[i].portraitkey}
          />,
        );
        if (i !== this.state.info2.length - 1) {
          peoples.push(<View key={i * -1 - 1} style={{width: 23}} />);
        }
      }
    }
    return peoples;
  }
  render() {
    return (
      <View style={styles.peopleListRowStyle}>
        <View
          style={{
            height: 20,
            width: widthScreen,
            flexDirection: 'row',
            marginTop: 17,
            justifyContent: 'space-between',
          }}>
          <View style={{flexDirection: 'row'}}>
            <View style={styles.bluepointStyle} />
            <Text style={styles.subtitleStyle}>{this.props.title}</Text>
          </View>
          {/*<TouchableOpacity*/}
          {/*  onPress={() => {*/}
          {/*    this.props.itemClick();*/}
          {/*  }}>*/}
          {/*  <Text style={styles.moreStyle}>更多 >></Text>*/}
          {/*</TouchableOpacity>*/}
        </View>
        <ScrollView
          horizontal={true}
          showsHorizontalScrollIndicator={false}
          alwaysBounceHorizontal={true}
          pagingEnabled={true}>
          <View
            style={{
              height: 150,
              flexDirection: 'row',
              marginTop: 25,
              marginLeft: 20,
              marginRight: 20,
            }}>
            {this.loadpeople()}
          </View>
        </ScrollView>
      </View>
    );
  }
}

class People extends Component {
  render() {
    return (
      <View>
        <TouchableOpacity
          onPress={() => {
            this.props.navigation.navigate('ShowOtherInfo', {
              uid: this.props.uid,
            });
          }}>
          <View style={styles.squarePeopleStyle}>
            <Image
              source={{uri: this.props.icon}}
              style={styles.squarePeopleStyle}
            />
          </View>
        </TouchableOpacity>
        <Text style={styles.peopleNameStyle}>{this.props.name}</Text>
      </View>
    );
  }
}

let styles: *;
styles = StyleSheet.create({
  containerStyle: {
    width: widthScreen,
    //height: heightScreen,
    backgroundColor: '#F3F7FA',
  },
  titleViewStyle: {
    backgroundColor: '#FFFFFF',
    height: 58,
  },
  titleTextStyle: {
    textAlign: 'center',
    width: widthScreen,
    top: 20,
    fontWeight: 'bold',
    //fontFamily: 'MicrosoftYaHei',
    fontSize: 14,
  },
  scrollStyle: {
    backgroundColor: '#F3F7FA',
  },
  abortHGBCStyle: {
    width: 375,
    height: 300,
    backgroundColor: '#FFFFFF',
    marginTop: 10,
    alignItems: 'center',
  },
  peopleListRowStyle: {
    width: 375,
    height: 199.5,
    backgroundColor: '#FFFFFF',
    marginTop: 12,
    justifyContent: 'space-between',
  },
  lankStyle: {
    width: widthScreen,
    height: 300,
    backgroundColor: '#FFFFFF',
    marginTop: 12,
  },
  bluepointStyle: {
    width: 4,
    height: 13,
    marginTop: 6,
    marginLeft: 20,
    backgroundColor: '#2672C0',
  },
  subtitleStyle: {
    marginTop: 2,
    marginLeft: 4,
    fontWeight: 'bold',
    //fontFamily: 'MicrosoftYaHei',
    fontSize: 15,
  },
  squarePeopleStyle: {
    width: 70,
    height: 75,
    backgroundColor: '#E5E5E5',
    borderRadius: 5,
  },
  peopleNameStyle: {
    width: 70,
    textAlign: 'center',
    marginTop: 12,
    fontWeight: 'bold',
    //fontFamily: 'MicrosoftYaHei',
    color: '#656565',
    fontSize: 13,
  },
  moreStyle: {
    //width: 295,
    textAlign: 'right',
    marginTop: 4,
    marginRight: 20,
    //fontFamily: 'MicrosoftYaHei',
    color: '#989898',
    fontSize: 12,
  },
});
